<template>
  <div class="app-key-manager">
    <!-- 代码雨背景 -->
    <div ref="matrixBg" class="matrix-bg" />

    <!-- 3D悬浮卡片容器 -->
    <div class="card-container">
      <!-- 3D悬浮卡片 -->
      <div ref="floatingCard" class="floating-card">
        <!-- 卡片头部 -->
        <div class="card-header">
          <div class="glow-icon">
            <i class="fas fa-key" />
          </div>
          <h2>App Key 管理</h2>
          <div class="tech-badge">
            <span>SECURITY PROTOCOL v2.4.1</span>
          </div>
        </div>

        <!-- 卡片内容 -->
        <div class="card-content">
          <el-form label-width="100px">
            <!-- 账户输入 -->
            <el-form-item label="账户：" class="form-item">
              <div class="input-wrapper">
                <div class="input-glow" />
                <el-input
                  v-model="userName"
                  disabled
                  placeholder="输入您的账户名"
                  class="tech-input"
                  @focus="activateInputGlow('user')"
                  @blur="deactivateInputGlow('user')"
                />
              </div>
            </el-form-item>

            <!-- App Key输入 -->
            <el-form-item label="App Key：" class="form-item">
              <div class="input-wrapper">
                <div class="input-glow" />
                <el-input
                  v-model="input"
                  disabled
                  placeholder="您的API"
                  class="tech-input key-input"
                  @focus="activateInputGlow('key')"
                  @blur="deactivateInputGlow('key')"
                />
              </div>
              <p class="appkey-p">
                <i class="fas fa-shield-alt" />
                App Key 是您个人认证信息，具有该账户完全的权限，请您妥善保管
              </p>
            </el-form-item>
          </el-form>
        </div>

        <!-- 卡片底部 -->
        <div class="card-footer">
          <div class="security-indicator">
            <span class="security-dot" />
            <span>安全连接已建立</span>
          </div>
          <!--          <div class="last-updated">
            <span>最后更新: {{ lastUpdated }}</span>
          </div>-->
        </div>
      </div>
    </div>

    <!-- 粒子效果容器 -->
    <div ref="particlesContainer" class="particles-container" />
  </div>
</template>

<script>
import { getInfoi, getMyAppKey } from '@/api/xwZx'

export default {
  props: {
    // 接收父组件传递的“加载触发器”
    loadTrigger: {
      type: Boolean,
      default: false // 默认不加载
    }
  },
  data() {
    return {
      input: '',
      userName: '',
      lastUpdated: '等待更新',
      matrixInterval: null,
      glowStates: {
        user: false,
        key: false
      }
    }
  },
  watch: {
    // 监听loadTrigger变化，为true时请求接口
    loadTrigger(newVal) {
      if (newVal) { // 仅当父组件传递true时，才请求接口
        this.refreshBtn() // 子组件的接口请求方法
      }
    }
  },
  mounted() {
    // 初始化页面效果
    this.initMatrixBackground()
    // 注释掉鼠标跟随效果
    // this.initFloatingEffect()
    // this.refreshBtn()
    this.userInfo()
  },

  beforeDestroy() {
    // 清理定时器
    if (this.matrixInterval) {
      clearInterval(this.matrixInterval)
    }
  },

  methods: {
    // 获取用户信息
    userInfo() {
      getInfoi().then((res) => {
        this.userName = res.username
        this.createParticleEffect({
          x: 100,
          y: 100,
          color: '#2196F3'
        })
      })
    },

    // 刷新获取App Key
    refreshBtn() {
      getMyAppKey().then((res) => {
        console.log(res, '刷新')
        if (res.code === 60030) {
          this.input = res.message
        } else {
          this.input = res.appKey
        }
        this.lastUpdated = new Date().toLocaleString()

        // 创建刷新成功的粒子效果
        this.createParticleEffect({
          x: window.innerWidth - 150,
          y: 200,
          color: '#2196F3'
        })

        // 激活密钥流光效果
        this.activateKeyAnimation()
      })
    },

    // 复制到剪贴板
    copyToClipboard() {
      if (!this.input) return

      navigator.clipboard.writeText(this.input).then(() => {
        // 显示复制成功的粒子效果
        this.createParticleEffect({
          x: window.innerWidth - 50,
          y: 300,
          color: '#4CAF50'
        })

        // 显示提示
        this.$message.success('App Key已复制到剪贴板')
      })
    },

    // 初始化代码雨背景（调整参数使其可见）
    initMatrixBackground() {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const matrixBg = this.$refs.matrixBg

      matrixBg.appendChild(canvas)

      // 设置canvas尺寸
      const resizeCanvas = () => {
        canvas.width = matrixBg.offsetWidth
        canvas.height = matrixBg.offsetHeight
      }

      window.addEventListener('resize', resizeCanvas)
      resizeCanvas()

      // 增加更多字符使代码雨更明显
      const chars = 'LYM'
      const columns = Math.floor(canvas.width / 15) // 减小列间距
      const drops = Array(columns).fill(0)
      const speeds = Array(columns).fill().map(() => Math.random() * 3 + 1) // 随机速度

      // 绘制代码雨（增强对比度）
      const drawMatrix = () => {
        // 调整清屏透明度，使轨迹更明显
        ctx.fillStyle = 'rgba(255, 255, 255, 0.08)'
        ctx.fillRect(0, 0, canvas.width, canvas.height)

        // 使用更深的蓝色增强对比度
        ctx.fillStyle = '#1976D2'
        ctx.font = '14px monospace' // 稍大一点的字体

        for (let i = 0; i < drops.length; i++) {
          const text = chars[Math.floor(Math.random() * chars.length)]
          ctx.fillText(text, i * 15, drops[i] * 15)

          // 随机重置雨滴位置
          if (drops[i] * 15 > canvas.height && Math.random() > 0.975) {
            drops[i] = 0
          }

          // 应用随机速度
          drops[i] += speeds[i]
        }
      }

      // 调整刷新频率使动画更流畅
      this.matrixInterval = setInterval(drawMatrix, 30)
    },

    // 注释掉鼠标跟随效果的实现
    // 初始化卡片悬浮效果
    /* initFloatingEffect() {
      const card = this.$refs.floatingCard
      // let xRotation = 0
      // let yRotation = 0

      // 鼠标移动时的3D效果
      document.addEventListener('mousemove', (e) => {
        // const xAxis = (window.innerWidth / 2 - e.pageX) / 25
        // const yAxis = (window.innerHeight / 2 - e.pageY) / 25

        // xRotation = yAxis
        // yRotation = -xAxis

        // card.style.transform = `perspective(1000px) rotateY(${yRotation}deg) rotateX(${xRotation}deg)`
      })
    }, */

    // 激活输入框发光效果
    activateInputGlow(type) {
      this.glowStates[type] = true
      const inputWrapper = this.$el.querySelector(`.input-wrapper:nth-of-type(${type === 'user' ? 1 : 2})`)
      if (inputWrapper) {
        inputWrapper.classList.add('active')
      }
    },

    // 取消输入框发光效果
    deactivateInputGlow(type) {
      this.glowStates[type] = false
      const inputWrapper = this.$el.querySelector(`.input-wrapper:nth-of-type(${type === 'user' ? 1 : 2})`)
      if (inputWrapper) {
        inputWrapper.classList.remove('active')
      }
    },

    // 激活密钥动画效果
    activateKeyAnimation() {
      const keyInput = this.$el.querySelector('.key-input')
      if (keyInput) {
        keyInput.classList.add('key-animation')
        setTimeout(() => {
          keyInput.classList.remove('key-animation')
        }, 2000)
      }
    },

    // 创建粒子效果（适配白色主题的颜色）
    createParticleEffect(options) {
      const container = this.$refs.particlesContainer
      const particleCount = 30

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div')
        particle.classList.add('particle')

        // 随机大小和位置
        const size = Math.random() * 8 + 2
        const angle = Math.random() * Math.PI * 2
        const distance = Math.random() * 60 + 20

        // 位置设置
        particle.style.left = `${options.x}px`
        particle.style.top = `${options.y}px`
        particle.style.width = `${size}px`
        particle.style.height = `${size}px`
        particle.style.backgroundColor = options.color
        particle.style.opacity = Math.random() * 0.8 + 0.2

        container.appendChild(particle)

        // 动画
        setTimeout(() => {
          const destX = options.x + Math.cos(angle) * distance
          const destY = options.y + Math.sin(angle) * distance

          particle.style.transform = `translate(${destX - options.x}px, ${destY - options.y}px)`
          particle.style.opacity = '0'
        }, 10)

        // 清理
        setTimeout(() => {
          particle.remove()
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
.app-key-manager {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #ffffff; /* 白色主题背景 */
  padding: 20px;
}

/* 代码雨背景 - 增加透明度使其更明显 */
.matrix-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5; /* 提高透明度 */
}

/* 卡片容器 - 调整为整体上移 */
.card-container {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh; /* 减小高度使整体上移 */
  padding: 20px;
  margin-top: -50px; /* 负边距上移 */
}

/* 3D悬浮卡片（白色主题调整） */
.floating-card {
  background: rgba(255, 255, 255, 0.95); /* 增加不透明度使卡片更清晰 */
  border: 1px solid rgba(33, 150, 243, 0.2); /* 蓝色边框 */
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  padding: 30px;
  box-shadow: 0 10px 50px rgba(33, 150, 243, 0.1), /* 蓝色阴影 */
  inset 0 0 2px rgba(255, 255, 255, 0.8);
  transition: transform 0.15s ease-out;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  position: relative;
}

/* 其他样式保持不变 */
.card-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.glow-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background-color: rgba(33, 150, 243, 0.1); /* 蓝色背景 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2196F3; /* 蓝色图标 */
  font-size: 24px;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3); /* 蓝色发光效果 */
}

.card-header h2 {
  color: #263238; /* 深灰色文本 */
  font-size: 24px;
  margin: 0 0 10px;
  text-shadow: 0 0 10px rgba(33, 150, 243, 0.1);
}

.tech-badge {
  display: inline-block;
  background-color: rgba(33, 150, 243, 0.1); /* 蓝色背景 */
  color: #2196F3; /* 蓝色文本 */
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(33, 150, 243, 0.3); /* 蓝色边框 */
}

.form-item {
  margin-bottom: 25px;
}

.el-form-item__label {
  color: #455A64 !important; /* 深灰色标签 */
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.input-wrapper.active {
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3); /* 蓝色发光效果 */
}

.input-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(33, 150, 243, 0) 0%,
    rgba(33, 150, 243, 0.2) 50%,
    rgba(33, 150, 243, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
}

.input-wrapper.active .input-glow {
  opacity: 1;
  animation: glowShift 2s infinite alternate;
}

.tech-input {
  background-color: rgba(255, 255, 255, 0.8) !important; /* 白色输入框 */
  border: 1px solid rgba(33, 150, 243, 0.3) !important; /* 蓝色边框 */
  color: #263238 !important; /* 深灰色文本 */
  padding: 12px 15px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.tech-input::placeholder {
  color: rgba(69, 90, 100, 0.5) !important; /* 灰色占位符 */
}

.tech-input:focus {
  border-color: #2196F3 !important; /* 蓝色边框 */
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important; /* 蓝色阴影 */
}

.key-input.key-animation {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(240, 247, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.8) 100%
  );
  animation: keyPulse 2s;
}

.appkey-p {
  color: #2196F3 !important; /* 蓝色文本 */
  font-size: 13px !important;
  margin: 8px 0 0 !important;
  padding: 5px 10px !important;
  background-color: rgba(33, 150, 243, 0.05) !important; /* 浅蓝色背景 */
  border-left: 2px solid #2196F3 !important; /* 蓝色左边框 */
  border-radius: 0 4px 4px 0 !important;
}

.appkey-p i {
  margin-right: 5px;
  font-size: 12px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid rgba(33, 150, 243, 0.1); /* 蓝色边框 */
  font-size: 12px;
  color: #455A64; /* 灰色文本 */
}

.security-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}

.security-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #4CAF50; /* 绿色指示灯 */
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  animation: pulse 2s infinite;
}

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.particle {
  position: absolute;
  border-radius: 50%;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

@keyframes glowShift {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes keyPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(33, 150, 243, 0.4);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

@media (max-width: 768px) {
  .floating-card {
    padding: 20px;
  }

  .card-footer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
</style>
